const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
/**
 *  webpack的配置文件
 *  所有构建工具都是基于nodejs的，模块化默认采用common.js
 */

module.exports = {
  entry: './src/app.js',  // 入口文件
  // 输出
  output: {
    filename: 'build.js',   // 输出文件名
    // 输出路径
    path: resolve(__dirname, './dist')
  },
  // loader的配置
  module: {
    rules: [
      // 详细的loader
      {
        test: /\.less$/,
        // use数组中loader执行的顺序：从右到左
        use:
          [
            // 创建style标签，将js中的样式资源插入并添加到head中生效
            'style-loader',
            // 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
            'css-loader',
            // 将less文件编译成css文件
            'less-loader'
          ]
      },
    ]
  },
  // plugins的配置
  plugins: [
    // 如果没有配置项则创建一个空的HTML，自动引入打包输出的所有资源(JS/CSS)
    new HtmlWebpackPlugin({
      // 复制'./src/index.html'这个文件，并自动引入打包输出的所有资源
      // template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development'
}